<template>
	<view class="body">
			<view class="list-textView">
				<view class="title" v-text="circles.articleTitle"></view>
				<view class="userDemo">
					<image class="user_image" src="../../static/image/weixin.png"></image>
					<view class="le">
						<view class="nickname" v-text="circles.nickname"></view>
						<view class="releaseTime" v-text="circles.releaseTime"></view>
					</view>
					<view class="btn">
						<button v-if="!Coll" class="btn-bor" @click="Collection">收藏</button>
						<button v-if="Coll" class="btn-bor" @click="Collection">取消收藏</button>
					</view>
				</view>
				<view class="preface" v-html="circles.articleContent"></view>
			</view>
			<!-- 评论 -->
			
			<!-- 底部 -->
			<view class="body_bottom">
				<view v-if="!qh" class="icon_fabulous ic">
					<uni-icons custom-prefix="iconfont" type="icon-icon" size="30"></uni-icons>
				</view>
				<view v-if="!qh" class="icon_Collection ic">
					<uni-icons custom-prefix="iconfont" type="icon-shoucang" size="30"></uni-icons>
				</view>
				<view v-if="!qh" class="icon_share ic">
					<uni-icons custom-prefix="iconfont" type="icon-fenxiang" size="30"></uni-icons>
				</view>
				<view v-if="true" class="icon_comment ic" @click="qiehuan">
					<uni-icons custom-prefix="iconfont" type="icon-liuyan" size="30"></uni-icons>
				</view>
				<uni-forms ref="form" v-if="qh" class="froms">
					<view class="conent">
						<uni-easyinput class="input_val" type="text" placeholder="请输入评论内容" />
						<button class="bts">确定</button>
					</view>
				</uni-forms>
			</view>
	</view>
</template>

<script>
		import {
			selectJsMicrocircleById
		} from '@/static/microCircle/http/getData.js'
		
		/* 收藏微圈 */
		import {
			addJsMicrocircle
		} from '@/static/microCircle/http/getData.js'
		
		/* 取消收藏 */
		import {
			delJsMicrocircle
		} from '@/static/microCircle/http/getData.js'
		
		export default {
			data(){
				return{
					microcircleId: 0,
					circles:{},
					qh:false,
					Coll:false
				}
			},
			onLoad(option){
				/* 获取前一个页面的id赋值给microcircleId */
				this.microcircleId = option.microcircleId;
				
				selectJsMicrocircleById({"microcircleId":option.microcircleId}).then(res => {
					this.circles = res.data.data;
				})
			},
			methods:{
				qiehuan(){
					this.qh = !this.qh
					console.log(this.qh);
				},
				Collection(){
					this.Coll = !this.Coll;
					var user = JSON.parse(uni.getStorageSync('token'));
					if(this.Coll){
						var json = {
							'userId' : user.userId,
							'collectionType' : 4,
							'effective' : 2,
							'remarks' : "暂无"
						}
						addJsMicrocircle(json).then(res =>{
							console.log(res.data.data);
						});
					}else{
						console.log(this.Coll);
						console.log("我是false");
					}
				}
			}
		}
</script>

<style>
	
	@import "@/static/microCircle/icon/iconfont.css";

	*{
		margin: 0;
		padding: 0;
	}
	.list-textView{
		width: 94%;
		margin: 0 auto;
	}
	.list-textView .title{
		font-size: 20px;
		font-weight: bold;
		margin-top: 10px;
	}
	.list-textView .userDemo{
		width: 100%;
		margin-top: 35rpx;
	}
	.user_image{
		width: 80rpx;
		height: 80rpx;
		float: left;
	}
	.le{
		width: 300rpx;
		height: 100rpx;
		margin-left: 5px;
		float: left;
	}
	.le .nickname{
		font-weight: bold;
		font-size: 15px;
		line-height: 25px;
	}
	.le .releaseTime{
		line-height: 20px;
		color: #909399;
	}
	.userDemo .btn{
		width: 100px;
		height: 50px;
		float: right;
	}
	button::after {
	  border: none;
	}
	.btn .btn-bor{
		background-color: #EFEFEF;
		border-radius: 30px;
		color: #767676;
	}
	.preface{
		float: left;
		margin-top: 10px;
	}
	.body_bottom{
		width: 100%;
		height: 70px;
		position: fixed;
		bottom: 0px;
		background-color: #FFFFFF;
	}
	.body_bottom .ic{
		width: 50px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		border-radius: 30px;
		margin: 10px 10px;
		border: 1px solid #CCCCCC;
		box-shadow: 0px 0px 4px #8F939C;
		float: left;
	}
	.body_bottom .icon_comment{
		float: right;
		margin-right: 20px;
	}
	.body_bottom .icon_share .icon_Collection .icon_fabulous{
		border: 1px solid #E6E6E6;
	}
	.froms{
		height: 100%;
		width: 84%;
	}
	.conent{
		width: 78%;
		height: 100px;
		margin: 0 auto;
	}
	.input_val{
		width: 80%;
		margin-top: 20px ;
		float: left;
	}
	.bts{
		width:20%;
		height: 37px;
		margin-top: 20px ;
		line-height: 37px;
		float: right;
	}
</style>
